Kuupäevavalija ligipääsetavus: Kaasavate kalendrividinade loomine

Õige:

            
<table>
  <caption>Kalender oktoobri 2024 jaoks</caption>
  <thead>
    <tr>
      <th scope="col">P</th>
      <th scope="col">E</th>
      <th scope="col">T</th>
      <th scope="col">K</th>
      <th scope="col">N</th>
      <th scope="col">R</th>
      <th scope="col">L</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

            

              
                Copy
              
            
          

2. ARIA atribuudid

ARIA (Accessible Rich Internet Applications) atribuudid pakuvad abitehnoloogiatele täiendavat semantilist teavet, parandades nende arusaamist interaktiivsetest elementidest. Kasutage ARIA atribuute, et:

• Määratle rollid: Näita elementide eesmärki, näiteks `role="grid"` kalendrivõrgu jaoks ja `role="gridcell"` iga kuupäeva lahtri jaoks.
• Esita sildid: Kasutage `aria-label` või `aria-labelledby` elementide kirjeldavate siltide pakkumiseks, eriti kui visuaalne silt on ebapiisav.
• Näita olekut: Kasutage atribuute nagu `aria-selected` valitud kuupäeva näitamiseks ja `aria-disabled` keelatud kuupäevade näitamiseks. Ekraanilugejad teatavad need olekud kasutajale.
• Esita kirjeldused: Kasutage `aria-describedby` täiendava teabe sidumiseks elemendiga, näiteks kuupäevavormingu kirjeldusega.

Näide:

            
<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Valige kuupäev</caption>
  <thead>
    <tr>
      <th scope="col">P</th>
      <th scope="col">E</th>
      <th scope="col">T</th>
      <th scope="col">K</th>
      <th scope="col">N</th>
      <th scope="col">R</th>
      <th scope="col">L</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="1. oktoober 2024">1</button></td>
      <td role="gridcell"><button aria-label="2. oktoober 2024">2</button></td>
      <td role="gridcell"><button aria-label="3. oktoober 2024">3</button></td>
      <td role="gridcell"><button aria-label="4. oktoober 2024">4</button></td>
      <td role="gridcell"><button aria-label="5. oktoober 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6. oktoober 2024">6</button></td>
      <td role="gridcell"><button aria-label="7. oktoober 2024">7</button></td>
      <td role="gridcell"><button aria-label="8. oktoober 2024">8</button></td>
      <td role="gridcell"><button aria-label="9. oktoober 2024">9</button></td>
      <td role="gridcell"><button aria-label="10. oktoober 2024">10</button></td>
      <td role="gridcell"><button aria-label="11. oktoober 2024">11</button></td>
      <td role="gridcell"><button aria-label="12. oktoober 2024">12</button></td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

            

              
                Copy
              
            
          

Märkus: Testige alati tegelike ekraanilugejatega, et veenduda ARIA atribuutide õiges tõlgendamises.

3. Klaviatuuril navigeerimine

Klaviatuuril navigeerimine on hädavajalik kasutajatele, kes ei saa kasutada hiirt ega muid osutusseadmeid. Veenduge, et kõik kuupäevavalija interaktiivsed elemendid oleksid klaviatuuri kaudu ligipääsetavad.

• Fookuse haldamine: Kasutage `tabindex` atribuuti fookuse järjekorra kontrollimiseks. Veenduge, et fookus liigub loogiliselt läbi kuupäevavalija. Kasutage JavaScripti fookuse haldamiseks, kui kasutaja vidinaga suhtleb.
• Nooleklahvid: Rakendage klaviatuuril navigeerimist nooleklahvide abil kuupäevade vahel liikumiseks. Vasak ja parem nooleklahv peaksid liikuma vastavalt eelmisele ja järgmisele päevale. Üles ja alla nooleklahvid peaksid liikuma samale päevale vastavalt eelmises ja järgmises nädalas.
• Home ja End klahvid: Home klahv peaks liikuma praeguse nädala esimesele päevale ja End klahv peaks liikuma praeguse nädala viimasele päevale.
• Page Up ja Page Down klahvid: Page Up klahv peaks liikuma eelmisele kuule ja Page Down klahv peaks liikuma järgmisele kuule.
• Enter klahv: Enter klahv peaks valima fookuses oleva kuupäeva.
• Escape klahv: Escape klahv peaks sulgema kuupäevavalija ja tagastama fookuse sisendväljale või nupule, mis selle käivitas.

Näide (JavaScript):

            
// Näide klaviatuuril navigeerimise haldamisest
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Liiguta fookus eelmisele päevale
      break;
    case 'ArrowRight':
      // Liiguta fookus järgmisele päevale
      break;
    case 'ArrowUp':
      // Liiguta fookus samale päevale eelmises nädalas
      break;
    case 'ArrowDown':
      // Liiguta fookus samale päevale järgmises nädalas
      break;
    case 'Enter':
      // Vali fookuses olev kuupäev
      break;
    case 'Escape':
      // Sulge kuupäevavalija
      break;
  }
});

            

              
                Copy
              
            
          

4. Ekraanilugeja ühilduvus

Ekraanilugejad tuginevad semantilisele HTML-ile ja ARIA atribuutidele, et pakkuda kasutajatele teavet. Veenduge, et teie kuupäevavalija ühilduks populaarsete ekraanilugejatega nagu NVDA, JAWS ja VoiceOver.

• Kirjeldavad sildid: Esitage kõikide interaktiivsete elementide jaoks selged ja lühikesed sildid. Kasutage `aria-label` või `aria-labelledby` täiendava konteksti pakkumiseks.
• Oleku teavitused: Kasutage ARIA atribuute elementide oleku näitamiseks, näiteks `aria-selected` valitud kuupäeva jaoks ja `aria-disabled` keelatud kuupäevade jaoks. Ekraanilugejad teatavad need olekud kasutajale.
• Reaalaja piirkonnad: Kasutage ARIA reaalaja piirkondi (nt `aria-live="polite"`), et teavitada dünaamilistest muudatustest kuupäevavalijas, näiteks kui kasutaja navigeerib teisele kuule. See võimaldab ekraanilugejatel teavitada kasutajat muudatusest nende töövoogu katkestamata.
• Veakäsitlus: Kui esineb vigu või valideerimisprobleeme, esitage selged ja informatiivsed veateated, mis on ekraanilugejatele ligipääsetavad. Kasutage `aria-describedby` veateate sidumiseks asjakohase sisendväljaga.

Näide:

            
<div aria-live="polite">
  <!-- Dünaamiline sisu, näiteks kuu navigeerimine -->
</div>

            

              
                Copy
              
            
          

5. Visuaalne disain

Kuupäevavalija visuaalne disain peaks samuti olema ligipääsetav. Kaaluge järgmist:

• Värvikontrast: Veenduge piisavas värvikontrastis teksti ja taustavärvide vahel, et vastata WCAG (Web Content Accessibility Guidelines) 2.1 taseme AA standarditele. Kasutage värvikontrasti kontrollija tööriista kontrastsussuhte kontrollimiseks.
• Fookuse indikaatorid: Pakkuge kõikide interaktiivsete elementide jaoks selget ja nähtavat fookuse indikaatorit. Fookuse indikaator peaks erinema ümbritsevatest elementidest ja ei tohi olla varjatud teiste elementide poolt.
• Fondi suurus ja vahed: Kasutage loetavat fondi suurust ja piisavat vahekaugust elementide vahel, et parandada loetavust ja kasutatavust.
• Vältige ainult värvile tuginemist: Ärge tuginege teabe edastamisel ainult värvile. Kasutage muid visuaalseid vihjeid, näiteks ikoone või teksti, värvikoodingu täiendamiseks.

6. Lokaliseerimine ja rahvusvahelistamine

Kuupäevavormingud, kalendrisüsteemid ja keelekonventsioonid erinevad kultuuride ja piirkondade lõikes. Veenduge, et teie kuupäevavalija on nõuetekohaselt lokaliseeritud ja rahvusvahelistatud, et toetada globaalset publikut.

• Kuupäevavormingud: Kasutage paindlikku kuupäevavormingute teeki, mis toetab erinevaid kuupäevavorminguid, näiteks PP/KK/AAAA (levinud Euroopas ja osades Aasias) ja KK/PP/AAAA (levinud Põhja-Ameerikas). Lubage kasutajatel kohandada kuupäevavormingut vastavalt oma eelistustele.
• Kalendrisüsteemid: Toetage erinevaid kalendrisüsteeme, nagu Gregoriuse kalender (kõige laiemalt kasutatav kalender) ja Hidžri kalender (kasutatakse paljudes islamiriikides).
• Keele tugi: Pakkuge tõlkeid kõikidele kuupäevavalija tekstielementidele, sealhulgas kuude nimedele, päevade nimedele ja siltidele.
• Paremalt vasakule (RTL) tugi: Veenduge, et kuupäevavalija kuvatakse õigesti RTL-keeltes, näiteks araabia ja heebrea keeles. See võib nõuda vidina paigutuse ja stiili kohandamist.
• Ajavööndid: Kaaluge ajavööndite mõju kuupäevade käsitlemisel. Salvestage kuupäevad ühtses ajavööndis (nt UTC) ja teisendage need kuvamisel kasutaja kohalikku ajavööndisse.

Näide: Kasutage JavaScripti teeke nagu `moment.js` või `date-fns` kuupäevavorminduse ja lokaliseerimise haldamiseks.

7. Mobiili ligipääsetavus

Mobiilseadmete kasvava kasutamise tõttu on oluline tagada, et teie kuupäevavalija on mobiilsetel platvormidel ligipääsetav. Kaaluge järgmist:

• Puutepunktid: Veenduge, et kõikidel interaktiivsetel elementidel on piisavalt suured puutepunktid, et neid mobiilseadmetel hõlpsalt puudutada. Apple soovitab minimaalseks puutepunkti suuruseks 44x44 pikslit.
• Reageeriv disain: Kasutage reageeriva disaini tehnikaid, et tagada kuupäevavalija kohanemine erinevate ekraanisuuruste ja -orientatsioonidega.
• Klaviatuurisisestus: Kui kuupäevavalija nõuab klaviatuurisisestust, pakkuge mobiilisõbralikku klaviatuuri, mis on optimeeritud kuupäevade sisestamiseks.
• Žestid: Vältige ainult žestidele tuginemist, mis võivad olla liikumispuuetega kasutajatele keerulised. Pakkuge alternatiivseid sisestusmeetodeid, nagu klaviatuuril navigeerimine või häälega juhtimine.

Testimine ja valideerimine

Põhjalik testimine on teie kuupäevavalija ligipääsetavuse tagamiseks ülioluline. Kasutage automatiseeritud ja käsitsi testimismeetodite kombinatsiooni:

• Automatiseeritud testimine: Kasutage ligipääsetavuse testimise tööriistu, nagu Axe või WAVE, et tuvastada tavalised ligipääsetavuse probleemid.
• Käsitsi testimine: Testige kuupäevavalijat käsitsi, kasutades ekraanilugejat ja klaviatuuril navigeerimist, et veenduda selle kasutatavuses puuetega inimeste jaoks.
• Kasutajatestimine: Viige läbi kasutajatestimist puuetega inimestega, et koguda tagasisidet ja tuvastada parendusvaldkonnad.
• WCAG-i vastavus: Veenduge, et teie kuupäevavalija vastab WCAG 2.1 taseme AA nõuetele.

Ligipääsetavate kuupäevavalijate näited

Mitu avatud lähtekoodiga ja kommertslikku kuupäevavalija teeki pakuvad head ligipääsetavuse tuge. Mõned näited on:

• React Datepicker: Populaarne Reacti komponent ARIA toega ja klaviatuuril navigeerimisega.
• Air Datepicker: Kerge ja kohandatav kuupäevavalija heade ligipääsetavuse funktsioonidega.
• FullCalendar: Täisfunktsionaalne kalendri komponent põhjaliku ligipääsetavuse toega.

Kuupäevavalija teegi valimisel hinnake hoolikalt selle ligipääsetavuse funktsioone ja veenduge, et see vastab teie konkreetsetele nõuetele.

Parimad tavad ligipääsetavate kuupäevavalijate loomiseks

• Kasutage kuupäevavalija struktureerimiseks semantilist HTML-i.
• Kasutage ARIA atribuute täiendava semantilise teabe pakkumiseks.
• Veenduge, et klaviatuuril navigeerimine on täielikult rakendatud.
• Testige ekraanilugejatega ühilduvuse kontrollimiseks.
• Pakkuge piisavat värvikontrasti ja selgeid fookuse indikaatoreid.
• Lokaliseerige ja rahvusvahelistage kuupäevavalija globaalsetele kasutajatele.
• Optimeerige kuupäevavalija mobiilseadmetele.
• Viige läbi põhjalik testimine ja valideerimine.

Järeldus

Ligipääsetavate kuupäevavalijate loomine on keeruline, kuid hädavajalik ülesanne. Järgides käesolevas juhendis esitatud juhiseid ja parimaid tavasid, saate luua kaasavaid kalendrividinaid, mis teenindavad kõigi võimetega kasutajaid, erinevates kultuurilistes ja tehnoloogilistes keskkondades. Pidage meeles, et ligipääsetavus on pidev protsess ning pidev testimine ja parendamine on üliolulised, et tagada teie kuupäevavalijate ligipääsetavus aja jooksul. Ligipääsetavust esikohale seades saate luua kõigile kaasavama ja kasutajasõbralikuma veebikogemuse.

Lisaresurss

• WAI-ARIA Autoringi Praktikate Juhend (APG) - Kalender
• Veebisisu ligipääsetavuse juhised (WCAG) 2.1
• Deque Ülikool